<template>
    <view>
        <view class="v-sender" id="v-send">
            <view class="v-sender__control">

                <!-- #ifndef H5 -->
                <view class="emoji" @tap="sendVoice">
                    <text v-if="!voice && !noSpeaking" class="n-icon n-icon-voice"></text>
                    <text v-else class="n-icon n-icon-keyboard"></text>
                </view>
                <!-- #endif -->

                <block v-if="noSpeaking">
                    <view class="falseinput"
                        style="text-align: center;color: #999;margin-left: 16upx;margin-right: 20upx;margin-left:10px;">
                        {{speaking_tips}}
                    </view>

                </block>
                <block v-else style="display: flex; align-items: ;">
                    <textarea id="sendbox" maxlength="99999999999" auto-height="true"
                        :class="{'textarea':true,'input':input_value && !voice}" v-model="input_value" v-if="!voice"
                        type="text" @input="listen('input', $event.detail.value)" @confirm="set_focos()"
                        @tap="sendertap();" confirm-type='发送' adjust-position="ture" confirm-hold="true"
                        cursor-spacing="15">
                    </textarea>
                    <view v-else :class="{'falseinput':true,'press':setting}"
                        style="text-align: center;color: #222;margin-right: 20upx;" @touchstart="startVoice"
                        @touchend="endVoice" @touchmove.stop.prevent="voiceIng" @touchcancel="voiceCancel">{{voiceTis}}
                    </view>
                    <!-- 图片/表情 -->
                    <view class="emoji" @tap="showemoji();" v-if="!emoji">
                        <text style="color: #444;" class="n-icon n-icon-face"></text>
                    </view>
                    <view class="emoji" @tap="hideemoji();" v-if="emoji">
                        <text style="color: #444;" class="n-icon n-icon-keyboard"></text>
                    </view>

                    <view class="btn sendbtn" v-if="input_value && !voice" @touchend.prevent="tapsender">发送</view>
                    <view class="bigbox3" style="display: flex; align-items: center; " v-if="!input_value && !voice">
                        <view class="emoji" @tap="show_panel();" v-if="!showPanel&&!input_value"> 
                            <text style="font-size: 37px;color: #444; padding-bottom: 5px;">&#xe634;</text>
                        </view>
                        <view class="emoji" style="display: flex;align-items: center;padding-bottom: 5px;" @tap="hide_panel();" v-else-if="showPanel&&!input_value">
                            <text style="font-size: 37px;color: #444;">&#xe603;</text>
                        </view>
                    </view>
                </block>
            </view>
            <view class="record" :class="setting?'':'hidden'">
                <view class="ing" :class="willStop?'hidden':''">
                    <view class="icon luyin2"></view>
                </view>
                <view class="cancel" :class="willStop?'':'hidden'">
                    <view class="icon chehui"></view>
                </view>
                <view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
            </view>

            <view v-if="showPanel" >
                <swiper :circular="false" :indicator-dots="false" :current="current" >
                    <swiper-item>
                        <view class="face_box">
                            <view style="width: 100%;">
                                <view class="emotion-box" style="height:200px">
                                    <view class="emotion-box-line" v-for="(line, i) in lists" :key="i">
                                        <view class="emotion-item" v-for="(item, index) in line" :key="index"
                                            @click="handleEmotion(item)">
                                            <image :src="'/static/emoji/'+item.name+'.gif'" style="width: 50rpx;height: 50rpx;">
                                            </image>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </swiper-item>
                    <swiper-item>
                        <!-- 表情图 -->
                        <view class="swiper-item">
                            <view >
                                <view style="width: 100%;">
                                    <view class="emotion-box" style="height:200px;flex-wrap: wrap;display: flex;">
                                        <view v-for="(item, index) in biaoList" :key="index">
                                            <image @click="handleEmotionbiaoFalse(item)" :src="'http://de-a.nextapi.cc'+item"
                                                style="margin: 5rpx; width: 110rpx;height: 110rpx;">
                                            </image>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </swiper-item>
                    <swiper-item>
                        <view class="swiper-item">
                            <view class="grid-4">
                                <view v-for="(item,index) in isgroup==0?tablist:tablist1" :key="index" @click="tabClick(item.id)">
                                    <view class="icons">
                                        <image style="width: 50rpx;height: 50rpx;" :src="item.img"></image>
                                    </view>
                                    <view>{{item.name}}</view>
                                </view>
                            </view>
                        </view>
                    </swiper-item>
                    
                </swiper>
            </view>
            </view>
        </view>


    </view>
</template>

<script>
    const recorderManager = uni.getRecorderManager();
 
    const {
        windowWidth,
        windowHeight
    } = uni.getSystemInfoSync();

    import helper from "../library/helper.js"
    import api from "../library/index.js"
    import action from "../library/action.js"
    export default {
        name: 'v-sender',
        props: {
            
            placeholder: {
                type: String,
                default: '说点什么吧'
            },
            value: {
                type: String,
                default: ''
            },
            noSpeaking: {
                type: Boolean,
                default: false
            },
            speaking_tips: {

            },

            forbidRedpack: {
                type: Boolean,
                default: false
            },
            showboard: {
                type: Boolean,
                default: false
            },
            groupid: {
                type: [Number, String],
                default: 0
            },
            isgroup: {
                default: 0
            },
            sendtype: {
                type: [Number, String],
                default: 'text'
            },
            userID:{
                default:0
            },
            closeFalse:{
                type:Boolean,
                default:true
            }
        },


        data() {
            return {
                current:0,
                showPanel: false,
                showPacket: false,
                voice: false,
                text: 'uni-app',
                voicePath: '',
                setting: false,
                emoji: false,
                faceImg: {},
                swipers: [],
                biaoFalse: false,
                voiceTis: '按住 说话',
                recordTis: "手指上滑 取消发送",
                recording: false,
                willStop: false,
                initPoint: {
                    identifier: 0,
                    Y: 0
                },
                recordTimer: null,
                recordLength: 0,
                mids: {},
                uploadnum: 0,
                starttime: 0,
                endtime: 0,
                voice_mid: '',
                focus: false,
                input_value: '',
                area_value: '',
                inputclass: 'textarea',
                sendtime: 0,
                keyboardheight: 0,
                borderheight: 0,
                user: uni.getStorageSync('userInfo'),
                list: [
                    ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴'],
                    ['睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过'],
                    ['酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢'],
                    ['饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂'],
                    ['疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见'],
                    ['擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠'],
                    ['鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀'],
                    ['西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', ],
                    ['凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀'],
                    ['足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强'],
                    ['弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你'],
                    ['NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈'],
                    ['磕头', '回头', '跳绳', '挥手', '激动', '闭嘴', '笑哭', '吐舌'],
                    ['耶', '跳舞', '恐惧', '失望', '脸红', '无语', '奸笑', '嘿哈'],
                    ['鬼混', '福', '合十', '强壮', '红包', '发财', '庆祝', '礼物']
                ],
                biaoList: [
                    // '/uploads/images/gif/1.gif',
                    '/uploads/images/gif/3.gif',
                    '/uploads/images/gif/4.gif',
                    '/uploads/images/gif/6.gif',
                    '/uploads/images/gif/7.gif',
                    '/uploads/images/gif/8.jpg',
                    '/uploads/images/gif/9.gif',
                    '/uploads/images/gif/10.gif',
                    '/uploads/images/gif/11.gif',
                    '/uploads/images/gif/12.gif',
                    '/uploads/images/gif/13.gif',
                    '/uploads/images/gif/14.gif',
                    '/uploads/images/gif/16.gif',
                    '/uploads/images/gif/17.gif',
                    '/uploads/images/gif/18.gif',
                    '/uploads/images/gif/19.gif',
                    '/uploads/images/gif/20.jpg',
                    '/uploads/images/gif/21.gif',
                    '/uploads/images/gif/22.gif',
                    '/uploads/images/gif/23.jpg',
                    '/uploads/images/gif/24.jpg',
                    '/uploads/images/gif/25.gif',
                    '/uploads/images/gif/26.jpg',
                    '/uploads/images/gif/27.jpg',
                    '/uploads/images/gif/28.jpg',
                    '/uploads/images/gif/29.jpg',
                    '/uploads/images/gif/30.jpg',
                    '/uploads/images/gif/32.gif',
                    '/uploads/images/gif/33.gif',
                    '/uploads/images/gif/34.jpg',
                    '/uploads/images/gif/35.gif',
                    '/uploads/images/gif/36.gif',
                    '/uploads/images/gif/37.gif',
                    '/uploads/images/gif/38.gif',
                    '/uploads/images/gif/39.gif',
                    '/uploads/images/gif/40.gif',
                    '/uploads/images/gif/41.gif',
                    '/uploads/images/gif/42.gif',
                    '/uploads/images/gif/43.gif',
                    '/uploads/images/gif/44.jpg',
                    '/uploads/images/gif/45.jpg',
                    '/uploads/images/gif/46.gif',
                    '/uploads/images/gif/47.gif',
                    '/uploads/images/gif/48.gif'
                ],
                reg: /\S{1,3}/gi,
                lists: [],
                listss: [],
                tablist:[
                    {name:'图片',img:'/static/aa/tu.png',id:0},
                    {name:'拍照',img:'/static/aa/pa.png',id:1},
                    {name:'通话',img:'/static/aa/yu.png',id:2},
                    {name:'红包',img:'/static/aa/hh.png',id:3},
                    {name:'表情',img:'/static/aa/bao.png',id:4},
                    {name:'收藏',img:'/static/aa/s.png',id:5},
                    {name:'文件',img:'/static/aa/wen.png',id:6},
                ],
                tablist1:[
                    {name:'图片',img:'/static/aa/tu.png',id:0},
                    {name:'拍照',img:'/static/aa/pa.png',id:1},
                    // {name:'通话',img:'/static/aa/yu.png',id:2},
                    {name:'红包',img:'/static/aa/hh.png',id:3},
                    {name:'表情',img:'/static/aa/bao.png',id:4},
                    {name:'收藏',img:'/static/aa/s.png',id:5},
                    {name:'文件',img:'/static/aa/wen.png',id:6},
                ],
                
            }
        },

        mounted() {
            
            let that = this;
            // #ifdef APP-PLUS
            recorderManager.onStart((e) => {

                this.recordBegin(e);
            })
            recorderManager.onStop(res => {
                this.recordStop(res);

            });
            // #endif
            var value = '';
            this.list = this.list.map((line, index) => {
                this.listss = [];
                line = line.map((item, idx) => {
                    value = item;
                    item = item.replace(/\S{1,3}/gi, this.emotion(item));
                    this.listss.push({
                        "name": item,
                        "index": index,
                        "value": value,
                        "idx": idx
                    })
                    return item;
                })
                this.lists.push(this.listss);
                return line;
            })
        },
        computed: {
            sendShowing() {
                return this.value.length > 0
            },
        },
        methods: {
            tabClick(index){
                switch(index){
                    case 0:
                        this.sendImg('album')
                        break;
                    case 1:
                        this.sendVedio()
                        break;
                    case 2:
                        this.yuyin()
                        break;
                    case 3:
                        this.sendRedpactet()
                        break;
                    case 4:
                        this.current = 1
                        break;
                    case 5:
                        this.shoucang()
                        break;
                    case 6:
                        this.openfile()
                        break;
                    case 7:
                        
                        break;
                }
            },
            // 收藏
            shoucang() {
                uni.navigateTo({
                    url: '/pages/friend/shoucang/shoucang'
                })
            },
            // 拨打语音
            yuyin() {
                // uni.showToast({
                //     icon: 'none',
                //     title: '语音通话请续费使用'
                // })
                console.log('打印用户信讯',this.userID,this.user.nickname)
          
                this.$emit('getCall',true)
            },
            // 表情包
            biao() {
                console.log('表情包')
                this.showPanel = true;
                
            },
            openfile(){
            	//this.$refs.filemanager._openFile();
            	let chooseFileModule = uni.requireNativePlugin("Rc-ChosseFile_ChooseFileModule");
            	chooseFileModule.openFileBrowse();
            },
			//调用视频/音频
			
				

            emotion(res) {
                //let word = res.replace(/\#|\;/gi,'')
                const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶',
                    '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗',
                    '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼',
                    '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头',
                    '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱',
                    '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火',
                    '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '闭嘴', '笑哭', '吐舌', '耶', '跳舞', '恐惧', '失望', '脸红', '无语', '奸笑',
                    '嘿哈', '鬼混', '福', '合十', '强壮', '红包', '发财', '庆祝', '礼物'
                ]
                let index = list.indexOf(res)
                var index1 = index + 100;
                return index1
            },
            showemoji() {
                this.showPanel  = true ;
                this.emoji = true;
                this.voice = false
                this.current = 0
                
                //   this.setChatHeight();
            },
            hideemoji() {
                this.showPanel = false;
                this.voice = false
                this.emoji = false;
                this.current = 2
                //  this.setChatHeight();
            },

            show_panel() {
                this.showPanel = true;
                this.emoji = false;
                this.current = 2
                this.setChatHeight();
                this.biaoFalse = false
            },
            hide_panel() {
                this.showPanel = false;
                this.emoji = false;
                this.setChatHeight();
            },

            setChatHeight() {
                // 

                //  console.log(this.sendHeight);
                var that = this;
                setTimeout(() => {

                    var that = this;
                    var query = uni.createSelectorQuery(); // 这里要加上select

                    query.in(that).select('#v-send').boundingClientRect(res => {
                        var hh = (parseInt(res.height) - 60);
                        this.$emit("senderheight", hh);

                    }).exec();

                }, 100);
            },

            sendVedio(type) {
                let that = this
                uni.chooseVideo({
                    success: (res) => {
                        let videoMessage = that.goEasy.im.createVideoMessage({
                            to: {
                                id: that.groupid,
                                type: that.GoEasy.IM_SCENE.PRIVATE,
                                data: {
                                   
                                }
                            },
                            file: res,
                            onProgress: function(progress) {
                                console.log('--899779---',progress)
                            },
                            notification: {
                                title: '发来一个视频',
                                body: '[视频消息]',
                                badge: '+1' // 字段最长 50 字符
                            }
                        });
                        // this.sendMessage(videoMessage);
                        that.goEasy.im.sendMessage({
                            message: videoMessage,
                            onSuccess: function(message) {
                                console.log('发送成功.', message.payload);
                                uni.pageScrollTo({
                                	scrollTop: 2000000,
                                	duration: 0
                                })
                                that.$emit('sendVedio', {
                                    mid: 'm' + Math.random().toString(36).substring(2),
                                    src: message.payload.video.url,
                                    time: res.duration
                                });
                            }
                        });
                    }
                })
                
                // uni.chooseVideo({
                //     maxDuration: 15,
                //     compressed: false,
                //     success(re) {
                //         console.log('============',re)
                //         that.sendertap();
                //         var mids = 'm' + Math.random().toString(36).substring(2);
                //         var duration = re.duration;
                       
                //         var _that = that;
                //         let imageMessage = _that.goEasy.im.createImageMessage({
                //             to: {
                //                 id: _that.groupid,
                //                 type: _that.GoEasy.IM_SCENE.PRIVATE,
                //                 data: {
                                    
                //                 }
                //             },
                //             file: re,
                //             onProgress: function(progress) {
                //                 console.log('progress',progress)
                //             },
                //             notification: {
                //                 title:'发来一张图片',
                //                 body: '[图片消息]',
                //                 badge: '+1' // 字段最长 50 字符
                //             }
                //         });
                //         _that.goEasy.im.sendMessage({
                //             message: imageMessage,
                //             onSuccess: function(message) {
                //                 console.log('发送成功.', message.payload.url);
                //                 uni.pageScrollTo({
                //                 	scrollTop: 2000000,
                //                 	duration: 0
                //                 })
                //                 _that.$emit('sendVedio', {
                //                     mid: mids,
                //                     src: message.payload.url,
                //                     time: duration
                //                 });
                //             }
                //         });
                        // helper.uploadFiles([re.tempFilePath], 'Vedio', {
                        //     type: 'vedio'
                        // }).then(res => {
                        //     that.$emit('sendVedio', {
                        //         mid: mids,
                        //         src: res,
                        //         time: duration
                        //     });
                        // });


                    // }
                // })
            },

            sendImg(type) {
                let that = this
                uni.chooseImage({
                    sourceType: ['album','camera'],
                    sizeType: ['compressed'], // 使用系统自带的压缩
                    success(re) {
                        that.sendertap();
                        that.uploadnum = 0;
                        re.tempFiles.forEach(file => {
                            let imageMessage = that.goEasy.im.createImageMessage({
                                to: {
                                    id: that.groupid,
                                    type: that.GoEasy.IM_SCENE.PRIVATE,
                                    data: {
                                        
                                    }
                                },
                                file: file,
                                onProgress: function(progress) {
                                    console.log(progress)
                                },
                                notification: {
                                    title:'发来一张图片',
                                    body: '[图片消息]',
                                    badge: '+1' // 字段最长 50 字符
                                }
                            });
                            that.goEasy.im.sendMessage({
                                message: imageMessage,
                                onSuccess: function(message) {
                                    console.log('发送成功.', message.payload.url);
                                    uni.pageScrollTo({
                                    	scrollTop: 2000000,
                                    	duration: 0
                                    })
                                    that.$emit('sendImage', {
                                        mid: 'm' + Math.random().toString(36).substring(2),
                                        src: message.payload.url
                                    });
                                  
                                }
                            });
                        })
                        // for (var i = 0; i < re.tempFilePaths.length; i++) {
                        //     that.mids[i] = 'm' + Math.random().toString(36).substring(2);
                        //     // that.$emit('sendImage', {mid:that.mids[i],src: re.tempFilePaths[i]});
                        //     var _that = that;
                        //     console.log('list',list)
                        //    helper.uploadFiles([], 'images', {
                        //        type: 'images'
                        //    }).then(res => {
                               
                        //        that.$emit('sendImage', {
                        //            mid: _that.mids[that.uploadnum],
                        //            src: res
                        //        });
                        //    });
                        // }

                    }
                })
            },
 

            sendRedpactet() {
                if (this.user.banknum < 1) {
                    uni.showModal({
                        title: '提示',
                        // content: "绑定SK账号后才可以发送红包",
                        content: "绑定银行账号后才可以发送红包",
                        showCancel: true,
                        cancelText: '关闭',
                        confirmText: '立即绑定',
                        success: res => {
                            if (res.confirm) {
                                uni.navigateTo({
                                    url: "/pages/mine/bank"
                                })
                            }
                        }
                    });
                    return false;
                } else {
                    uni.navigateTo({
                        url: '../friend/readpacket?isgroup=' + this.isgroup + '&id=' + this.groupid
                    })
                }
                this.hide_panel();
            },
            listen(name, eventOrValue) {

                this.$emit(name, eventOrValue);
                this.focus = false;
            },
            set_focos() {
                if (this.focus == false) this.focus = true;
            },
            getfocus(detail) {

                this.boardheight = detail.height;
                // #ifdef APP-PLUS
                if (plus.os.name == 'Android') this.$emit("keyboardheight", detail.height);
                // #endif


            },
            unfocus() {
                this.boardheight = 0;
                //   console.log('sender失去焦点')
                this.$emit("keyboardheight", 0);

            },
            unfocus1() {
                // console.log('box失去焦点')
                this.$emit("keyboardheight", 0);

            },
            sendertap() {
                this.showPanel = false;
                this.emoji = false;
                

            },

            setinputvalue(e) {
                this.input_value = this.input_value + e + ' ';
                this.$emit('input', this.input_value);
            },
            istap() {

            },
            tapsender() {

                //this.inputclass='textarea sending'
                if (this.input_value != '') {

                    var that = this;
                    //  setTimeout(function(){that.$emit('send',that.$event);},1000)
                    that.$emit('send', that.$event);
                    this.area_value = '';
                    this.input_value = '';
                    //that.$emit("senderheight",0);   
                    //this.keyboardheight=this.boardheight;

                    //  this.$emit("senderheight",300);
                    if (this.sendtype != 'text') {
                        this.hideemoji();
                        this.hide_panel();
                    }
                    // #ifdef APP-PLUS
                        // if(plus.os.name=="iOS") uni.hideKeyboard();
                    // #endif
                }

            },

            listen1(e) {
                //   console.log(e);
                this.input_value = e;
                this.listen('input', e);
                //   console.log(e);

            },
            clickbox(e) {
                var x = e.touches[0].clientX;
                var y = e.touches[0].clientY;
                //  console.log( windowWidth-x, windowHeight-y)
                if (windowWidth - x < 65) this.tapsender();
            },
            startVoice(e) {
                this.setting = true;
                this.willStop = false;
                this.voiceTis = '手指上滑 取消发送'
                recorderManager.start({
                    format: 'mp3',
                    numberOfChannels: 2,
                    duration: 6000
                });
                this.starttime = new Date().getTime();
                this.initPoint.Y = e.touches[0].clientY;
                this.initPoint.identifier = e.touches[0].identifier;
                console.log('start');
            },
            //录音开始UI效果
            recordBegin(e) {

                /** 暂停语音播放 */
                console.log('录音开始UI效果');
                recorderManager.pause();

                this.setting = true;
                this.voiceTis = '松开 结束';
                this.recordLength = 0;
                this.recordTimer = setInterval(() => {
                    this.recordLength++;
                }, 1000)
            },
            //录音停止   上传到服务器
            recordStop(res) {
                var that = this;
                this.endtime = new Date().getTime();
                that.voicePath = res.tempFilePath;
                if (!this.willStop) {

                    if (this.endtime - this.starttime < 1000) return that.$toast('时间太短了');
                    var duration = (this.endtime - this.starttime) / 1000;
                    this.voice_mid = 'm' + Math.random().toString(36).substring(2);
                    let audioMessage = this.goEasy.im.createAudioMessage({
                        to: {
                            id: that.groupid,
                            type: that.GoEasy.IM_SCENE.PRIVATE,
                            data: {
                               
                            }
                        },
                        file: res,
                        onProgress: function(progress) {
                            console.log(progress)
                        },
                        notification: {
                            title:  '发来一段语音',
                            body: '[语音消息]',
                            badge: '+1' // 字段最长 50 字符
                        }
                    });
                    console.log('发送成功.',audioMessage);
                    this.goEasy.im.sendMessage({
                        message: audioMessage,
                        onSuccess: function(message) {
                            console.log('发送成功.', message.payload);
                            uni.pageScrollTo({
                                scrollTop: 2000000,
                                duration: 0
                            })
                            that.$emit('face', {
                                url: message.payload.url,
                                time: duration.toFixed(2),
                                mid: 'm' + Math.random().toString(36).substring(2)
                            })
                          
                        }
                    });
                    // that.$emit('face', {
                    //     url: that.voicePath,
                    //     time: duration.toFixed(2),
                    //     mid: this.voice_mid
                    // })
                    // helper.uploadFiles([that.voicePath], 'audio', {
                    //     type: 'audio'
                    // }).then(res => {

                    //     that.$emit('face', {
                    //         url: res,
                    //         time: duration.toFixed(2),
                    //         mid: this.voice_mid
                    //     })

                    // });
                    action.playVoice('/static/voice/voice.mp3');
                } else {
                    console.log('取消发送录音');
                }
            },
            // 录音被打断
            voiceCancel() {
                this.setting = false;

                this.willStop = true; //不发送录音
                recorderManager.stop(); //录音结束
                this.voiceTis = '按住 说话';
                this.recordTis = '手指上滑 取消发送'
            },
            // 录音中(判断是否触发上滑取消发送)
            voiceIng(e) {
                if (!this.setting) {
                    return;
                }
                let touche = e.touches[0];
                //上滑一个导航栏的高度触发上滑取消发送
                if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
                    this.willStop = true;
                    this.recordTis = '松开手指 取消发送'
                } else {
                    this.willStop = false;
                    this.recordTis = '手指上滑 取消发送'
                }
            },

            endVoice() {
                this.setting = false
                recorderManager.stop();
                this.voiceTis = '按住 说话';
                this.recordTis = '手指上滑 取消发送';
            },
            sendVoice() {
                this.voice = !this.voice;
                this.biaoFalse = false
                this.showPanel = false
                this.emoji = false
            },
            getEmoji() {

            },
            sendEmoji(e) {
                //this.showPanel = false;
                this.emoji = false
                this.$emit('emoji', e)
            },
            handleEmotionbiaoFalse(item) {
                console.log('表情包', item)
                let data = `http://de-a.nextapi.cc${item}`
                let that = this
                that.$emit('sendImage', {
                    mid: 'm' + Math.random().toString(36).substring(2),
                    src: data
                });
                that.biaoFalse = false
            },
            handleEmotion(item) {
                if (this.voice) {
                    this.voice = false
                }
                var v = item.value;
                this.input_value += '[' + v + ']';
                this.area_value = this.input_value
                this.listen1(this.input_value);

                this.$emit('handleEmotion', this.input_value);


            },
        },
        created() {
            this.getEmoji()
        },
        onLoad() {


        },
    }
</script>

<style lang="scss" scoped>
    @import "@/static/css/chat/style.scss";
    $control-height: 120upx;
    $input-height: $control-height - $uni-spacing-col-base * 2;

    .face_box {
        // position: fixed;
        // bottom: 60px;
        ;
        // left: 1px;
        width: calc(100% - 4px);
        z-index: 99;
        background-color: #fff;
        border: 1px #ddd solid;
        padding-top: 5px;
        ;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
    }

    .faceImg {
        width: 100upx;
        flex-basis: 100upx;
    }

    .n-icon {
        font-size: 33px;
        line-height: 33px;
        color: #333;
        vertical-align: middle;
    }

    .icons {
        height: 70upx;
        line-height: 70upx;
        vertical-align: middle;
    }

    .icons image {
        width: 65upx;
        height: 65upx;
        vertical-align: middle;
    }

    .bigbox {
        position: fixed;
        bottom: 0px;
        left: 110upx;
        width: calc(100vw - 100upx);
        height: 120upx;
        line-height: 120upx;
        padding: 0px;
        z-index: 0;

        border: 0px #eee solid;
        color: transparent !important;
    }

    .bigbox2 {
        position: absolute;
        top: 10px;
        right: 80upx;
        width: 84upx;
        height: 120upx;
        line-height: 120upx;
        padding: 0px;
        z-index: 10;
        border: 0px #eee solid;

    }

    .bigbox3 {
        position: absolute;
        top: 10px;
        right: 0upx;
        width: 80upx;
        height: 120upx;
        line-height: 120upx;

        padding: 0px;
        z-index: 0;
        text-align: right;
        justify-content: right;
        border: 0px #eee solid;

    }




    .sending {
        color: transparent !important;
    }

    .v-sender {
        z-index: 99999999;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 99vw;
        padding-left: 1vw;
        background-color: #fafafa;
        border-top: 1px solid #eee;

        &__panel,
        &__control {
            position: relative;
            width: 100%;

            &::before {
                display: block;
                content: '\20';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                background-color: #ddd;
                height: 1upx;
                transform: scaleY(0.5);
            }
        }

        &__panel {
            width: 100%;
            display: table;
            padding: 20upx 0;
            font-size: 28upx;
            background: #fafafa;

            >view {
                .n-icon {
                    font-size: 33px;
                    color: #999;
                }

                text-align: center;
                display: table-cell;
            }
        }

        &__control {
            height: $control-height;

            padding: $uni-spacing-col-base 0px $uni-spacing-col-base 0;

            &,
            .emoji,
            .btn {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: center;
                box-sizing: border-box;

            }

            >.emoji,
            >.btn,
            >input {
                margin-left: $uni-spacing-row-base;
            }

            view {

                height: $input-height;
                flex-shrink: 0;
            }

            .emoji {
                font-size: 64upx;
                line-height: $input-height;
            }

            input,
            .falseinput {
                flex: 1;
                height: $input-height;
                border-radius: $uni-border-radius-base;

                box-sizing: border-box;
                background-color: #f8f8f8;
                height: 68upx;
                line-height: 68upx;
                margin-left: 10px;
                ;
            }

            .falseinput.press {
                background-color: rgba(0, 0, 0, .1);
                color: rgba(0, 0, 0, .8) !important;
            }

            .btn {
                line-height: $input-height - 10upx;
                height: $input-height - 10upx;
                color: #fff;
                text-align: center;
                background-color: #3388ff;
            }
        }
    }

    .grid-4 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 40upx;
        text-align: center;
    }

    .textarea,
    .textareas {
        font-size: 32upx;
        background: #fff;
        border: 1px solid #ddd;
        max-height: 80upx;
        min-height: 40upx;
        line-height: 40upx;
        padding: 12upx 10upx;
        border-radius: 3px;
        ;
    }

    .textarea {
        margin-left: 10px;
        /* #ifndef H5 */
        width: calc(100% - 290upx);
        /* #endif */


        /* #ifdef H5 */
        width: calc(100% - 210upx);
        /* #endif */

    }

    .textarea.input {
        /* #ifndef H5 */
        width: calc(100% - 360upx);
        /* #endif */


        /* #ifdef H5 */
        width: calc(100% - 280upx);
        /* #endif */
    }

    .sendbtn {

        margin-left: 16upx !important;
        padding: 0px 40upx !important;

    }

    .emotion-box {
        margin: 0 auto;
        width: calc(100% - 4px);
        box-sizing: border-box;
        padding: 2px;
        overflow: hidden;
        overflow-y: auto;
    }

    .emotion-box-line {
        display: flex;
    }

    .emotion-item {
        flex: 1;
        text-align: center;
        cursor: pointer;
    }
</style>